/* 
假设 这个班级的人数 100人   不分姓。。。
1 查询 姓 以  万开头 
  2人。。。
2 每一页装10个人

3 给我查下 第 10页的  姓万。。。 


 */




$(function () {


  // 0 定义一个全局变量  获取文章列表数据 的 参数 
  let Params = {
    // string	搜索关键词，可以为空，为空返回某类型所有文章
    key: "",
    // string	文章类型id，可以为空，为空返回所有类型文章
    type: "",
    // string	文章状态，草稿 ，已发布,为空返回所有状态文章
    state: "",
    // number	当前页，为空返回第1页
    page: 1,
    // number	每页显示条数，为空默认每页6条
    perpage: 10,
  }

  // 0 定义一个 数据带总条数 全局变量
  let totalCount = 0;

  // 1 发送请求 动态渲染文章分类 下拉框
  function getCategorytList() {
    $.get("/admin/category/list", function (res) {
      let html = "<option value=''>所有分类</option>";
      res.data.forEach(item => {
        html += `<option value="${item.id}" >${item.name}</option>`;
      });
      $("#selCategory").html(html);

    })
  }


  // 2 获取文章列表
  function getArticleQuery() {
    $.get("/admin/article/query", Params, function (res) {
      const list = res.data.data;
      const html = template("trTpl", { list });
      $("#mainTable tbody").html(html);

      // 获取总条数
      totalCount = res.data.totalCount;
      // 渲染分页组件
      renderPager();
    })

  }


  // 3 筛选按钮
  $("#btnSearch").click(function () {

    // 3.0  重置页码 从第一页开始 查询
    Params.page = 1;


    // 3.1 获取表单的值
    Params.key = $("#aname").val().trim(); // 获取输入框
    Params.type = $("#selCategory").val(); //  获取下拉列表id  文章分类
    Params.state = $("#selStatus").val();// 获取下拉列表 状态 值
    // 3.2 发送请求
    getArticleQuery();
  })

  // 4 重置 
  $("#btnReset").click(function () {
    // 4.0  重置页码 从第一页开始 查询
    Params.page = 1;


    //  4.1 重置 表单 组件
    $("#aname").val("");
    $("#selCategory").val("");
    $("#selStatus").val("");

    // 4.2 重置 接口参数

    Params.key = "";
    Params.type = "";
    Params.state = "";

    // 4.3  重新发送请求 来渲染页面 
    getArticleQuery();
  })

  // 5 给删除按钮 绑定点击事件
  // 动态生成  事件委托
  $("#mainTable").on("click", ".delete", function () {
    // 5.1 弹出提示框 询问用户
    layer.confirm("您确定删除吗?", { title: "提示" }, (index) => {
      // 5.2 获取id 发送删除请求
      const id = $(this).data("id")
      $.post("/admin/article/delete", { id }, function (res) {
        // 5.3 刷新页面即可
        layer.msg(res.msg);
        getArticleQuery();

      })

    })
  })



  // 分页
  // 接口参数 理解
  // 分页组件 使用 理解
  // 业务  接口参数和 分页  组装如何使用  理解 

  // 5 渲染分页组件
  function renderPager() {
    layui.laypage.render({
      elem: 'pager',
      count: totalCount, // 数据的总条数 
      limit: Params.perpage,// 设置每一页的条数 10 条
      curr: Params.page, //先显示2
      jump(obj, first) {
        // 被点击的页数
        if (!first) {
          // 给全局参数赋值
          Params.page = obj.curr;
          // 重新发送一次请求获取对应页码数据
          getArticleQuery();
          // 存在bug 每一次点击 页码都重新变回1  
        }
      }

    });

  }

  // 1 发送请求 动态渲染文章分类 下拉框
  getCategorytList();
  // 2 获取文章列表
  getArticleQuery();








})